<template>
	<view class="container container333104">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex7-clz">
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz"> </view>
			<!--  #endif -->
			<image src="/static/q.png" class="image3-size diygw-image diygw-col-0 image3-clz" mode="widthFix"></image>
			<text class="diygw-col-0 text1-clz"> 销售开单管理系统 </text>
		</view>
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24 form-clz">
			<u-form-item :borderBottom="false" class="diygw-col-24 username-clz diygw-form-border diygw-uform-item" labelPosition="top" prop="username">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center solid">
					<text class="diy-icon-people margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
					<u-input :focus="formData.usernameFocus" placeholder="请输入登录名" v-model="form.username"></u-input>
				</view>
			</u-form-item>
			<u-form-item :borderBottom="false" class="diygw-col-24 password-clz diygw-form-border diygw-uform-item" labelPosition="top" prop="password">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center solid">
					<text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
					<u-input :focus="formData.passwordFocus" placeholder="请输入密码" v-model="form.password" type="password" :password-icon="true"></u-input>
				</view>
			</u-form-item>
			<text @click="submitForm" class="diygw-col-24 gradual-green text4-clz"> 登录 </text>
			<view class="flex flex-wrap diygw-col-0 items-center flex3-clz">
				<view class="flex flex-wrap diygw-col-0 items-center" @tap="navigateTo" data-type="agreeFunction">
					<text v-if="globalData.agree == '1'" class="flex icon3 diygw-col-0 icon3-clz diy-icon-roundcheck"></text>
					<text v-if="globalData.agree != '1'" class="flex icon2 diygw-col-0 icon2-clz diy-icon-round"></text>
					<text class="diygw-col-0"> 查看并接受 </text>
				</view>
				<text class="diygw-col-0 text11-clz"> 《隐私权政策》 </text>
				<text class="diygw-col-0"> 和 </text>
				<text class="diygw-col-0 text13-clz"> 《用户协议》 </text>
			</view>
		</u-form>
		<!-- #ifdef  -->
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex5-clz"> </view>
		<!--  #endif -->
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { logintype: '0', agree: '0' },
				formRules: {
					username: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '登录名不能为空'
						}
					],
					password: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '密码不能为空'
						}
					]
				},
				form: {
					username: '',
					password: ''
				},
				formData: {
					usernameFocus: false,
					passwordFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {
				await this.isloginFunction();
				await this.initResetform();
			},
			// 同意或不同意 自定义方法
			async agreeFunction(param) {
				let thiz = this;
				//如果不同意，改为同意
				this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
			},

			// 新增方法 自定义方法
			async isloginFunction(param) {
				let thiz = this;
				if (this.$session.getToken()) {
					this.navigateTo({
						type: 'page',
						url: 'index'
					});
				}
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.$nextTick(async () => {
					let valid = await this.$refs.formRef.validate();
					if (valid) {
						//保存数据
						let param = this.form;
						let header = {};
						let url = '/sell/login/login';

						if (this.globalData.agree != '1') {
							this.showToast('请点击同意授权协议');
							return;
						}
						param.logintype = this.globalData.logintype;
						let res = await this.$http.post(url, param, header, 'json');
						if (res.code == 200) {
							this.$session.setUser(res.data);
							this.showToast(res.msg, 'success');
							this.navigateTo({
								type: 'page',
								url: 'index'
							});
						} else {
							this.showToast(res.msg, 'error');
						}
						if (res.code == 200) {
							this.showToast(res.msg, 'success');
						} else {
							this.showModal(res.msg, '提示', false);
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex7-clz {
		padding-top: 80rpx;
		border-bottom-left-radius: 40rpx;
		background-size: 100% 100%;
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 60rpx;
		border-top-left-radius: 0rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 40rpx;
		background-image: url(/static/mbz704.png);
		background-position: bottom center;
		padding-right: 10rpx;
	}
	.flex8-clz {
		height: 120rpx;
	}
	.image3-clz {
		flex-shrink: 0;
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		width: 120rpx !important;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		height: 120rpx !important;
	}
	.image3-size {
		height: 120rpx !important;
		width: 120rpx !important;
	}
	.text1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		font-weight: bold;
		padding-left: 20rpx;
		font-size: 32rpx !important;
		padding-bottom: 10rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 20rpx;
	}
	.form-clz {
		padding-top: 30rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 30rpx;
		border-top-right-radius: 12rpx;
		margin-right: 30rpx;
		background-color: #ffffff;
		margin-left: 30rpx;
		overflow: hidden;
		width: calc(100% - 30rpx - 30rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 30rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 30rpx;
		padding-right: 10rpx;
	}
	.username-clz {
		margin-left: 10rpx;
		padding-top: 0rpx;
		padding-left: 0rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		font-size: 28rpx !important;
		padding-bottom: 0rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 0rpx;
	}
	.password-clz {
		margin-left: 10rpx;
		padding-top: 0rpx;
		padding-left: 0rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		font-size: 28rpx !important;
		padding-bottom: 0rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 0rpx;
	}
	.text4-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		font-weight: bold;
		letter-spacing: 6rpx !important;
		padding-left: 10rpx;
		font-size: 32rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
		box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
		overflow: hidden;
		width: calc(100% - 30rpx - 30rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
	}
	.flex3-clz {
		margin-left: 10rpx;
		padding-top: 16rpx;
		padding-left: 30rpx;
		padding-bottom: 16rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 30rpx;
	}
	.icon3-clz {
		color: #39b54a;
	}
	.icon3 {
		font-size: 40rpx;
	}
	.icon2-clz {
		color: #39b54a;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.text11-clz {
		color: #39b54a;
	}
	.text13-clz {
		color: #39b54a;
	}
	.flex5-clz {
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		padding-right: 30rpx;
	}
	.container333104 {
		background-position: top center;
		background-size: contain;
		background-repeat: no-repeat;
	}
</style>
